<template>
  <div class="lucky2018_2">
    <div class="zhuanpan" :style="isZhuan?move:stop"></div>
    <div class="bg"></div>
    <div class="btn" @click="zhuan"></div>
    <toast 
      v-model="showPositionValue" 
      type="text" 
      :time="2000" 
      is-show-mask 
      :text="msg" 
      position="middle">
    </toast>
  </div>
</template>
<script>
import { setInterval, clearInterval} from 'timers';
import { Toast,querystring } from 'vux'
import {showMsg, setStore, getStore,setLStore} from '../../../config/mUtils'

import {getSDK} from '../../../service/wxShare.js'//非组件需要添加wxshare.js

export default {
  components:{
    Toast
  },
  data(){
    return {
      isZhuan:false,
      timer:null,
      current:0,//当前位置
      target:0,//停止位置
      speed:10,//速度
      moreDeg:720,//多转的
      speedtime:20,//间隔时间
      clickNum:0,
      num:1,//奖品号码
      msg:'',
      code:'',//微信授权
      showPositionValue:false,
      nick:''
    }
  },
  created(){
    setLStore('url','https://www.bigzhuan.com/zhuanzhuan')
    if(getStore('code')||querystring.parse()['code']){
      getWXInfo(getStore('code')||querystring.parse()['code'])
        .then(res=>{
          if(res.status == 1){
            this.userInfo = res.userinfo
          }
        })
    }else{
      location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx7a3ff5db84ef3504&redirect_uri=https://www.bigzhuan.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
    }
  },
  computed:{
    move(){
      return {
        'transform':`rotate(${this.current}deg)`
      }
    },
    stop(){
      return {
        'transition':`transform 3s ease-out`,
        'transform':`rotate(${this.target}deg)`
      }
    }
  },
  methods:{
    zhuan(){
      this.isZhuan = true
      this.timer = setInterval(()=>{
        this.current +=this.speed
        if(this.current == 360){
          this.current = 0
        }
        if(this.target != 0 && this.current+this.moreDeg == this.target){
          clearInterval(this.timer)
        }
      },this.speedtime)

      //接口
      getJiang('lucky2018_2',this.userInfo.openid)
        .then(res=>{
          if(res.status == 1){
            this.num = res.jiang

            setTimeout(()=>{
              this.target = (10-this.num)*60 + this.moreDeg
              this.isZhuan = false
            },4000)
          }else{
            showMsg(res.msg,this)
            setTimeout(() => {
              location.href='https://www.bigzhuan.com'
            }, 3000);
          }
        })
    },
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .lucky2018_2{
    position: relative;
    .bg{
      .wh(10rem,17.64rem);
      background-image: url('https://www.bigzhuan.com/img/choujiang_11.png');
      background-size: 100%;
      position: absolute;
      top: 0
    }
    .zhuanpan{
      .wh(6.48rem,6.4933rem);
      background-image: url('https://www.bigzhuan.com/img/choujiang_12.png');
      background-size: 100%;
      position: absolute;
      top: 5.11rem;
      left: 1.77rem;
    }
    .btn{
      .wh(2rem,2rem);
      position: absolute;
      top: 7.4rem;
      left: 4rem;
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
    width: 70% !important;
  }
</style>
